import React from "react";
import Confirm from "../../common/Confirm";
import InputBox from "../../common/InputBox";
import CascadingAddress from "./CascadingAddress";
import Select from "../../common/Select";
import Relay from "react-relay";
import "./css/Company.css";
import EnterpriseDetailMutation from "./mutation/EnterpriseDetailMutation";
import {hashHistory} from "react-router";
import CreateEnterpriseMutation from "./mutation/CreateEnterpriseMutation";
import EnterpriseTypeModal from "./children_com/EnterpriseTypeModal";
import FindByPhoneMutation from "./mutation/FindByPhoneMutation";

import {_message,_notification,_Icon} from 'ANT_DE';
const message = _message,
    notification = _notification,
    Icon = _Icon;

import {Button,Modal} from 'fly';

/*导出组件d*/
export default class EditCompany extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            enterprise: {},
            companyhint: '',
            organization: '',
            type: '',
            address: '',
            connection: '',

            account: '',
            bank: '',
            banknum: '',
            ratepayer: '',
            userphone: '',
            remark: '',
            mainService:"",
            enType_oneActive:0,

            disabled:true
        };

        this.enterprise = {};
        this.Style = {};
        this.oArr1 = [
            {text: "国内", value: "0"},
        ]

        this.sheng = ''
        this.shi = ''
        this.xian = ''

        this.getEnterprizeDetail = this.getEnterprizeDetail.bind(this);
        this.updataChecked = this.updataChecked.bind(this);
        this.save = this.save.bind(this);
    }

    componentWillMount() {

        this.enid = sessionStorage.getItem('enterpriseId');
        this.getEnterprizeDetail(this.enid);
        this.Style1 = {
            p_companytype: {
                marginTop: 20,
                width: 315,
                height: 32,
                lineHeight: "32px",
                marginLeft: "143px",
                paddingLeft: 10,
                background:"#f4fafa"
            }
        }
        this.Style = {
            main: {
                width: '100%',
                height: '100%',
            },
            p_title: {
                width: "100%",
                height: 57,
                borderBottom: "1px #ededed solid"
            },

            sp_database: {
                lineHeight: "15px",
                display: "block",
                color: '#4c5e70',
                fontSize: 16,
                width: 109,
                height: 15,
                padding: "20px 0",
                textAlign: "center",
                borderBottom: "3px solid #36b3b3",
                fontFamily:"Microsoft YaHei"
            },
            sp_financeinfo: {
                lineHeight: "15px",
                display: "block",
                color: '#4c5e70',
                fontSize: 15,
                width: 109,
                height: 15,
                padding: "20px 0",
                textAlign: "center",
                borderBottom: "3px solid #36b3b3",
            },
            sp_admin: {
                lineHeight: "15px",
                display: "block",
                color: '#4c5e70',
                fontSize: 15,
                width: 109,
                height: 15,
                padding: "20px 0",
                textAlign: "center",
                borderBottom: "3px solid #36b3b3",
            },
            sp_other: {
                lineHeight: "15px",
                display: "block",
                color: '#4c5e70',
                fontSize: 16,
                width: 109,
                height: 15,
                padding: "20px 0",
                textAlign: "center",
                borderBottom: "3px solid #36b3b3",
            },

            inputbox_line: {
                paddingLeft:10,
                marginTop:20,
                marginLeft: 26,
                width: 315,
                height: 32,
                borderColor:"transparent",
                borderStyle:"solid",
                background:"#f4fafa"
            },
            inputbox_linetop: {
                paddingLeft:10,
                marginTop: 70,
                width: 314,
                height: 32,
                borderColor:"transparent",
                background:"#f4fafa"
            },
            inputbox_linemulit:{
                width:670,
                paddingRight: 190,
                marginTop: 20,
                height: 147,
                alignItems: 'flex-start',
                borderColor:"#36b3b3",
            },
        }
    }

    getEnterprizeDetail(enterpriseId,isLoding) {
        let Loading;
        if( !!isLoding ){
            Loading = message.loading("正在恢复上次配置",0);
        }

        Relay.Store.commitUpdate(
            new EnterpriseDetailMutation({
                enterpriseId:this.enid,
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {

                    isLoding && loading();
                    let errorCode = response.enterpriseDetail.data.errorCode,
                        serviceType;

                    //index差异，有减1 ， 无使用默认0；s

                    if (errorCode == 0) {
                        let enterprise = response.enterpriseDetail.data.enterprise,
                            showEnType;

                        if( enterprise.serviceType === "" ){
                            serviceType = "";
                            showEnType= "";
                        }else{
                            serviceType = enterprise.serviceType - 1;
                            showEnType = ['制衣厂', '辅料厂', '织布厂', '印刷厂', '织纱厂'][serviceType];
                        }

                        this.enterprise = enterprise;
                        this.state.mainService = enterprise.mainService;
                        this.state.enType_oneActive =  serviceType;

                        this.setState({
                            enterprise: this.enterprise,
                        });

                        this.refs._enterpriseName.setState({
                            text: enterprise.enterpriseName
                        })

                        this.refs._enterpriseCode.setState({
                            text: enterprise.enterpriseCode
                        })

                        this.refs._enterpriseType.setState({
                            showEnType:enterprise.serviceTypeName  //显示的一级服务
                        })

                        this.refs._address.setState({
                            text: enterprise.address
                        })

                        this.refs._telephone.setState({
                            text: enterprise.telephone
                        })

                        this.refs._bankAccount.setState({
                            text: enterprise.bankAccount
                        })

                        this.refs._bankName.setState({
                            text: enterprise.bankName
                        })

                        this.refs._bankNo.setState({
                            text: enterprise.bankNo
                        })

                        this.refs._taxpayerNo.setState({
                            text: enterprise.taxpayerNo
                        })

                        this.refs._user_phone.setState({
                            text: enterprise.userPhone
                        })

                        this.refs._user_name.setState({
                            text: enterprise.userName,
                        })

                        this.refs._user_password.setState({
                            text: enterprise.password,
                        })

                        this.refs._remark.setState({
                            text: enterprise.remark
                        })


                        this.refs.selecttab.setState({
                            provSelectedValue: enterprise.province,
                            citySelectedValue: enterprise.city,
                            distSelectedValue: enterprise.region
                        })

                        this.sheng = enterprise.province;
                        this.shi = enterprise.city;
                        this.xian = enterprise.region;
                        if (enterprise.userName) {
                            this.checkUser();
                        }

                        this.serviceType = enterprise.serviceType;
                        this.mainService = enterprise.mainService;

                    }

                }
            }
        )
    }


    componentDidMount() {
    }

    handleclick() {

    }



    save() {

        let loading =  message.loading("正在拼了命的保存",0);  loading();

        if (this.state.userphone.length > 0 ||
            this.state.companyhint.length > 0 ||
            this.state.organization.length > 0 ||
            this.state.connection.length > 0 ||
            this.state.account.length > 0 ||
            this.state.bank.length > 0 ||
            this.state.banknum.length > 0 ||
            this.state.ratepayer.length > 0 ||
            this.state.organization.length > 0) {

            message.error("请检查选项内容是否正确");

            return;
        }


        let enterType;
        if (this.state.enType_oneActive === "") {
            enterType = ''
        } else {
            if (this.refs._enterpriseType.state.OneList.length > 0) {
                if (this.serviceType == this.refs._enterpriseType.state.OneList[this.state.enType_oneActive].dicId) {
                    enterType = this.serviceType;
                } else {
                    enterType = this.refs._enterpriseType.state.OneList[this.state.enType_oneActive].dicId;
                }
            }else {
                enterType = this.serviceType;
            }
        }

        let mainService = this.state.mainService;

        let companyname1 = this.refs._enterpriseName.state.text;
        let enterpriseCode1 = this.refs._enterpriseCode.state.text;
        let address1 = this.refs._address.state.text;
        let telephone1 = this.refs._telephone.state.text;
        let bankAccount1 = this.refs._bankAccount.state.text;
        let bankName1 = this.refs._bankName.state.text;
        let taxpayerNo1 = this.refs._taxpayerNo.state.text;
        let bankNo1 = this.refs._bankNo.state.text;
        let remark1 = this.refs._remark.state.text;


        if (this.refs._enterpriseName.state.text != "" && this.refs._enterpriseCode.state.text != "" && this.refs._user_phone.state.text != "") {
            Relay.Store.commitUpdate(
                new CreateEnterpriseMutation({
                    userId: this.state.userId,
                    enterpriseId:this.enid,
                    enterpriseName: companyname1,
                    enterpriseCode: enterpriseCode1,
                    entype: '',
                    countryType: 1,
                    province: this.sheng,
                    city: this.shi,
                    region: this.xian,
                    address: address1,
                    telephone: telephone1,
                    bankAccount: bankAccount1,
                    bankName: bankName1,
                    taxpayerNo: taxpayerNo1,
                    bankNo: bankNo1,
                    remark: remark1,
                    userName: this.refs._user_name.state.text,
                    userPhone: this.refs._user_phone.state.text,
                    mainService: mainService,
                    serviceType: enterType,
                }),
                {
                    onFailure: () => {
                        message.error("保存配置失败，请检查网络或刷新页面");
                        loading();
                    },
                    onSuccess: (response) => {
                        if (response.createEnterprise.data.errorCode == 0) {
                            loading();
                            notification.open({
                                message:"保存当前配置成功",
                                description:"当前配置保存成功，下次登录会自动为您配置.",
                                placement:"bottomLeft",
                                icon: <Icon type="smile-circle" style={{ color: '#108ee9',fontSize:35}} />,
                            });

                            hashHistory.push("/company");
                        } else {
                            loading();
                        }

                        // 把当前的企业类型 保存到sessionStorage
                        sessionStorage.setItem("serviceType",enterType)
                    }
                }
            )
        }else{
            message.error("请检查必填项")
        }
    }

    bluron(type) {
        switch (type) {
            case 'companyhint':
                let companyname1 = this.refs._enterpriseName.state.text;
                let reg_com = /^[a-zA-Z\u4e00-\u9fa5（）]{4,40}$/
                this.companyname = companyname1;
                if (!reg_com.test(companyname1)) {
                    this.setState({
                        companyhint: "公司格式错误，请重新输入(只能包含汉字和字母和（）,长度4-40)"
                    });
                    return;
                }
                if (this.companyname == "") {
                    this.setState({
                        companyhint: "企业名称不能为空"
                    });
                } else {
                    this.setState({
                        companyhint: ""
                    });
                }
                return;

            case 'organization':
                let enterpriseCode1 = this.refs._enterpriseCode.state.text;
                let re_enterpriseCode = /^([0-9A-Za-z]){8}[-][0-9A-Za-z]$/;

                if (re_enterpriseCode.test(enterpriseCode1)) {
                    this.enterpriseCode = enterpriseCode1;

                    this.setState({
                        organization: ""
                    });
                } else if (enterpriseCode1 == "") {
                    this.setState({
                        organization: "组织结构不能为空"
                    });
                } else {
                    this.setState({
                        organization: "组织结构格式错误，请重新输入"
                    });
                }
                return;


            case 'address':
                let address1 = this.refs._address.state.text;
                let re_address = /^([\u4e00-\u9fa5]|[0-9]|[a-z]|[A-Z]){2,200}$/;
                let address;
                if (re_address.test(address1)) {
                    this.address = address1;
                    this.setState({
                        address: ""
                    });
                } else if (address1 == "") {
                    this.setState({
                        address: ""
                    });
                } else {
                    this.setState({
                        address: "公司地址格式错误，请重新输入"
                    });
                }
                return;

            case 'connection':
                let telephone1 = this.refs._telephone.state.text;
                let re_telephone = /^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                let re_telephone1 = /^400[0-9]{7}/;
                let re_telephone2 = /^800[0-9]{7}/;
                let re_telephone3 = /^0[0-9]{2,3}[0-9]{8}/;
                let re_telephone4 = /^0[0-9]{2,3}-[0-9]{8}/;
                let telephone;
                if (re_telephone.test(telephone1) || re_telephone1.test(telephone1) || re_telephone2.test(telephone1) || re_telephone3.test(telephone1) || re_telephone4.test(telephone1)) {
                    telephone = telephone1;
                    this.setState({
                        connection: ""
                    });
                } else if (telephone1 == "") {
                    this.setState({
                        connection: ""
                    });
                } else {
                    this.setState({
                        connection: "联系方式格式错误，请重新输入"
                    });
                }
                return;

            case 'account':
                let bankAccount1 = this.refs._bankAccount.state.text;

                let re_bankAccount = /^[\u4e00-\u9fa5（）]{2,200}$/;
                let bankAccount;

                if (re_bankAccount.test(bankAccount1)) {
                    bankAccount = bankAccount1;
                    this.setState({
                        account: ""
                    });
                } else if (bankAccount1 == "") {
                    this.setState({
                        account: ""
                    });
                } else {
                    this.setState({
                        account: "开户名称格式错误，请重新输入"
                    });
                }
                return;

            case 'bank':
                let bankName1 = this.refs._bankName.state.text;
                let re_bankName = /^[\u4e00-\u9fa5]{2,200}$/;
                let bankName;
                if (re_bankName.test(bankName1)) {
                    bankName = bankName1;
                    this.setState({
                        bank: ""
                    });
                } else if (bankName1 == "") {
                    this.setState({
                        bank: ""
                    });
                } else {
                    this.setState({
                        bank: "开户银行格式错误，请重新输入"
                    });
                }
                return;

            case 'banknum':
                let bankNo1 = this.refs._bankNo.state.text;
                let re_bankNo = /^\d{0,30}$/;;
                let bankNo;
                if (re_bankNo.test(bankNo1)) {
                    bankNo = bankNo1;
                    this.setState({
                        banknum: ""
                    });
                } else if (bankNo1 == "") {
                    this.setState({
                        banknum: ""
                    });
                } else {
                    this.setState({
                        banknum: "银行账号格式错误，请重新输入"
                    });
                }
                return;

            case 'ratepayer':
                let taxpayerNo1 = this.refs._taxpayerNo.state.text;
                let re_taxpayerNo = /^[0-9]{9,20}$/;
                let taxpayerNo;
                if (re_taxpayerNo.test(taxpayerNo1)) {
                    taxpayerNo = taxpayerNo1;
                    this.setState({
                        ratepayer: ""
                    });
                } else if (taxpayerNo1 == "") {
                    this.setState({
                        ratepayer: ""
                    });
                } else {
                    this.setState({
                        ratepayer: "纳税人识别号格式错误，请重新输入"
                    });
                }
                return;
        }
    }

    checkUser() {
        this.refs._user_name.setState({
            text: "",
        })
        this.refs._user_password.setState({
            disabled: true,
        })


        let telephone1 = this.refs._user_phone.state.text;
        let re_telephone = /^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        let re_telephone1 = /^400[0-9]{7}/;
        let re_telephone2 = /^800[0-9]{7}/;
        let re_telephone3 = /^0[0-9]{2,3}[0-9]{8}/;
        let re_telephone4 = /^0[0-9]{2,3}-[0-9]{8}/;
        let telephone;
        if (re_telephone.test(telephone1) || re_telephone1.test(telephone1) || re_telephone2.test(telephone1) || re_telephone3.test(telephone1) || re_telephone4.test(telephone1)) {
            telephone = telephone1;
            this.setState({
                userphone: ""
            });
        } else if (telephone1 == "") {
            this.setState({
                userphone: ""
            });
        } else {
            this.setState({
                userphone: "手机格式错误，请重新输入"
            });
            return;
        }
        Relay.Store.commitUpdate(
            new FindByPhoneMutation({
                phone: this.refs._user_phone.state.text,
            }),
            {
                onFailure: () => {
                    alert('请求失败');
                },
                onSuccess: (response) => {
                    let errorCode = response.findByPhone.findByPhone.errorCode;
                    if (errorCode == '000001') {
                        this.refs._user_name.setState({
                            disabled: false
                        })

                        this.refs._user_password.setState({
                            text: "123456",
                            disabled: true
                        })
                    } else {
                        let user = response.findByPhone.findByPhone.userModel;
                        this.setState({
                            userId: user.uid,
                        })
                        this.refs._user_name.setState({
                            text: user.name,
                            disabled: true
                        })

                        this.refs._user_password.setState({
                            disable: true,
                            text: "******"
                        })
                    }
                }
            }
        )

    }

    getMessage(space, id) {
        switch (space) {
            case 'prov':
                //console.warn(space+'-----'+id)
                this.sheng = id;
                return;
            case 'city':
                //console.warn(space+'-----'+id)
                this.shi = id;
                return;
            case 'district':
                //console.warn(space+'-----'+id)
                this.xian = id;
                return;
        }
    }

    // 点击企业类型设置时更新mainService状态.
    updataChecked(checked,active){
        this.setState({
            mainService:checked,
            enType_oneActive:active
        })
    }

    render() {
        return (
            <div style={this.Style.main}>
                <div  className="entypeConfig">
                    <div style={{
                        position: "relative",
                        width: "calc(100% + 10px)",
                        height: 480,
                        backgroundColor: "#fff",
                        border: "1px solid #ededed",
                        marginBottom: "10px"
                    }}>
                        <p style={this.Style.p_title} className="entype_infoShow--headerTitle">
                            <span style={this.Style.sp_database}>基础资料</span>
                        </p>

                        <div className="company_form--divItem">
                            <InputBox titletext={'企业名称'} className="company_form--divItem re_font--MicYaHei" style={this.Style.inputbox_line} space={15} ref={'_enterpriseName'}
                                      minlength={4} maxlength={40} bluron={this.bluron.bind(this,'companyhint')}
                            />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top:80
                        }}>{this.state.companyhint}</span>

                        <span className="star1" style={{
                            display: "block",
                            position: "absolute",
                            left: "45px",
                            top: 84,
                            width: "11px",
                            height: "18px"
                        }}></span>

                        <span className="star2" style={{
                            display: "block",
                            position: "absolute",
                            left: "18px",
                            top: 138,
                            width: "11px",
                            height: "18px"
                        }}></span>
                        <div className="company_form--divItem">
                            <InputBox titletext={'组织结构代码'} style={this.Style.inputbox_line} space={15}
                                      ref={'_enterpriseCode'} maxlength={50}
                                      bluron={this.bluron.bind(this, 'organization')}/>
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "138px"
                        }}>{this.state.organization}</span>

                        <EnterpriseTypeModal
                            Sty={this.Style1}
                            updaChecked={this.updataChecked}
                            topSave={{mainService:this.state.mainService,enType:this.state.enType_oneActive}}
                            ref={'_enterpriseType'}
                        />

                        <span className="re_font--MicYaHei" style={{marginLeft: "63px",fontSize:14}}>企业地址</span>

                        <div className="company_select" style={{display:"inline-block"}}>
                            <Select className="enter_type--arr_select" oArr={this.oArr1} style={{
                                marginLeft:27,
                                marginTop: "20px",
                                width: 98,
                                height: 30,
                                display: "block"
                            }}/>
                        </div>

                        <div className="company_select--item company_detail_address" style={{marginBottom: 20, marginLeft: "180px"}}>
                            <CascadingAddress ref={'selecttab'} getMessage={this.getMessage.bind(this)} />
                        </div>

                        <div className="company_form--divItem">
                            <InputBox titletext={'详细地址'} className="company_item_patch" style={this.Style.inputbox_linetop} space={15} ref={'_address'}
                                      maxlength={50} bluron={this.bluron.bind(this, 'address')}
                            />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "347px"
                        }}>{this.state.address}</span>

                        <div className="company_form--divItem">
                            <InputBox titletext={'联系方式'} className="company_item_patch" style={this.Style.inputbox_line} space={15} ref={'_telephone'}
                                      maxlength={50} bluron={this.bluron.bind(this, 'connection')} />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: 396
                        }}>{this.state.connection}</span>
                    </div>

                    <div style={{
                        width: "calc(100% + 10px)",
                        height: 300,
                        backgroundColor: "#fff",
                        border: "1px solid #ededed",
                        marginBottom: "10px",
                        position: "relative"
                    }}>
                        <div className="entype_infoShow--headerTitle" style={{height:"initial"}}>
                            <span style={this.Style.sp_financeinfo}>财务信息</span>
                        </div>


                        <div className="company_form--divItem">
                            <InputBox titletext={'开户名称'} style={this.Style.inputbox_line} space={15} ref={'_bankAccount'}
                                      maxlength={50} bluron={this.bluron.bind(this, 'account')} />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "86px"
                        }}>{this.state.account}</span>

                        <div className="company_form--divItem">
                            <InputBox titletext={'开户银行'} style={this.Style.inputbox_line} space={15} ref={'_bankName'}
                                      maxlength={50} bluron={this.bluron.bind(this, 'bank')} />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "138px"
                        }}>{this.state.bank}</span>

                        <div className="company_form--divItem">
                            <InputBox titletext={'银行账号'} style={this.Style.inputbox_line} space={15} ref={'_bankNo'}
                                      maxlength={50} bluron={this.bluron.bind(this, 'banknum')} />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "192px"
                        }}>{this.state.banknum}</span>

                        <div className="company_form--divItem">
                            <InputBox titletext={'纳税人识别号'} style={this.Style.inputbox_line} space={15} ref={'_taxpayerNo'}
                                      maxlength={50} bluron={this.bluron.bind(this, 'ratepayer')} />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "246px"
                        }}>{this.state.ratepayer}</span>
                    </div>

                    <div style={{
                        position: "relative",
                        width: "calc(100% + 10px)",
                        height: 250,
                        backgroundColor: "#fff",
                        border: "1px solid #ededed",
                        marginBottom: "10px"
                    }}>
                        <div className="entype_infoShow--headerTitle" style={{height:"initial"}}>
                            <span style={this.Style.sp_admin}>企业管理员</span>
                        </div>


                        <div className="company_form--divItem">
                            <InputBox titletext={'手机'} style={this.Style.inputbox_line} space={15}
                                      defaultvalute={''} ref={'_user_phone'} bluron={this.checkUser.bind(this)}
                                      maxlength={11}
                            />
                        </div>

                        <span className="star1" style={{
                            display: "block",
                            position: "absolute",
                            left: "70px",
                            top: "85px",
                            width: "11px",
                            height: "18px"
                        }}></span>
                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "90"
                        }}>{this.state.userphone}</span>
                        <div className="company_form--divItem">
                            <InputBox titletext={'姓名'} style={this.Style.inputbox_line} space={15}
                                      defaultvalute={''} ref={'_user_name'} />
                        </div>
                        <div className="company_form--divItem">
                            <InputBox titletext={'密码'} style={this.Style.inputbox_line} space={15}
                                      defaultvalute={''} ref={'_user_password'} />
                        </div>
                    </div>

                    <div className="enType_note" style={{
                        width: "calc(100% + 10px)",
                        height: 323,
                        backgroundColor: "#fff",
                        border: "1px solid #ededed",
                        marginBottom: "10px"
                    }}>
                        <div className="entype_infoShow--headerTitle" style={{height:"initial"}}>
                            <span style={this.Style.sp_other}>其他</span>
                        </div>

                        <div className="company_form--divItem" style={{width:1030}}>
                            <InputBox titletext={'备注'} className="pro_overflow_inputSty" style={this.Style.inputbox_linemulit} space={15} multiline={true}
                                      ref={'_remark'} maxlength={200} bluron={this.bluron.bind(this,'remark')} />
                        </div>

                        <span style={{
                            color: "#ff6f64",
                            position: "absolute",
                            left: "480px",
                            top: "86px"
                        }}>{this.state.remark}</span>

                        <div className="company_form_ok">
                            <Button onClick={this.save}> 保存 </Button>
                        </div>
                    </div>
                </div>
            </div>

        )
    }
}
